<template>
	<view class="address-container">
        <view class="add-info">
            <u-cell-group>
            	<u-field v-model="addressForm.name" label="收货人" placeholder="请填写收货人姓名" placeholder-style="color: #CDCDCD"  maxlength="20"></u-field>
            	<u-field v-model="addressForm.mobile" label="手机号码" placeholder="请填写收货人手机号" placeholder-style="color: #CDCDCD" maxlength="11"></u-field>
            	<u-field v-model="addressForm.addrs" label="所在地区" placeholder="省市区县、乡镇等" placeholder-style="color: #CDCDCD" disabled right-icon="arrow-right" @click="showAddressSelector = true"></u-field>
            	<u-field v-model="addressForm.addr" type="textarea" label="详细地址" placeholder="街道、楼牌号等" placeholder-style="color: #CDCDCD" maxlength="50"></u-field>
                <u-cell-item title="标签" :arrow="false" hover-class="noen" class="add-tags">
                    <u-tag class="u-m-l-20" v-for="(tag, index) in tags" :key="index" :text="tag" :type=" addressForm.ship_address_name === tag ? 'primary' : 'info'" shape="circle" @click="handleTags(tag)"></u-tag>
                </u-cell-item>
                <u-cell-item title="设置默认地址" :arrow="false" hover-class="none">
                    <u-switch active-color="#ff5000" v-model="addressForm.def_addr"></u-switch>
                </u-cell-item>
            </u-cell-group>
        </view>
        <view class="big-btn" @click="$u.throttle(submitAddressForm, 1000)">
            <view class="btn">
                <text class="u-m-l-10">保存</text>
            </view>
        </view>
        <u-popup v-model="showAddressSelector" mode="bottom" closeable close-icon-size="20" border-radius="20">
            <region-picke @addressSelectorChanged="addressSelectorChanged" @closeRegionpicke="showAddressSelector = false" :show="showAddressSelector"></region-picke>
        </u-popup>
	</view>
</template>

<script>
    import * as API_Address from '@/api/address.js'
    import { Foundation, RegExp } from '@/ui-utils/index.js'
	export default {
		data() {
			return {
                addressForm: {
                    name: '',
                    mobile: '',
                    addrs: '',
                    addr: '',
                    region: '',
                    ship_address_name: '',
                    def_addr: false
                }, //地址表单数据
                tags: ['家', '公司', '学校'], //标签
                showAddressSelector: false, //地区选择弹出框是否显示
			}
		},
        onLoad(options) {
            this.addressForm.addr_id = options.addr_id || ''
            this.addressForm.addr_id && this.getAddressDetail()
            uni.setNavigationBarTitle({ title: options.addr_id ? '编辑收货人' : '新建收货人'})
        },
		methods: {
            //标签选择
            handleTags(tag) {
                this.addressForm.ship_address_name = tag
            },
            //地址发生变化
            addressSelectorChanged(object) {
                const obj = {
                    last_id: object[object.length - 1].id,
                    addrs: object.map(key => { return key.local_name }).join(' ')
                }
                this.addressForm.region = obj.last_id
                this.addressForm.addrs = obj.addrs
            },
            //保存收货地址
            submitAddressForm() {
                const params = JSON.parse(JSON.stringify(this.addressForm))
                if (!params.name.trim()) {
                    this.$u.toast(`请输入收货人姓名`)
                } else if(!params.mobile){
                    this.$u.toast(`请输入手机号码`)
                } else if (!RegExp.mobile.test(params.mobile)) {
                    this.$u.toast(`手机号格式不对，请重新输入`)
                } else if (!params.region) {
                    this.$u.toast(`请选择收货地区`)
                } else if (!params.addr.trim()) {
                    this.$u.toast(`请输入详细地址`)
                } else {
                    const addr_id = params.addr_id
                    params.def_addr = params.def_addr ? 1 : 0
                    if (addr_id) {
                        API_Address.editAddress(addr_id, params).then(()=>{
                            this.$u.toast(`修改成功`)
                            uni.navigateBack()
                        })
                    } else {
                        API_Address.addAddress(params).then(() => {
                            this.$u.toast(`添加成功`)
                            uni.navigateBack()
                        })
                    }
                }
            },
            //地址详情
            getAddressDetail(){
                API_Address.getAddressDetail(this.addressForm.addr_id).then(res => {
                    const params = JSON.parse(JSON.stringify(res))
                    params.def_addr = !!params.def_addr
                    params.addrs = `${params.province}${params.city}${params.county}${params.town}`
                    params.region = params.town_id && params.town_id != 0 ? params.town_id : params.county_id
                    this.addressForm = params
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .address-container {
        background-color: #FFFFFF;
        height: 100%;
		position: relative;
        /deep/.add-info {
            .add-tags {
                .u-cell__value {
                    text-align: left;
                    margin-left: 60rpx;
                }
                .u-size-default {
                    font-size: 24rpx;
                    background-color: #FFFFFF;
                    padding: 10rpx 30rpx;
                }
            }
            .u-cell__label {
                font-size: 24rpx;
            }
            .u-switch {
                margin-top: 20rpx;
            }
        }
    }
</style>
